<template>
  <div>
    <el-card class="box-card">
      <el-row type="flex" justify="space-between">
        <el-col :span="3" v-for="(value, key) in status" :key="key">
          <div
            class="minh"
            :style="{'background-color': getColor(value.label)}"
          >
            <div class="stitle">{{ value.value }}</div>
            <el-divider></el-divider>
            <div class="sname">{{ value.label }}</div>
          </div>
        </el-col>
        <!-- <el-col :span="3">
          <div class="lawngreen minh">
            <div class="stitle">{{ status.gasdivideele }}</div>
            <el-divider></el-divider>
            <div class="sname">气电比</div>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="tomato minh">
            <div class="stitle">{{ status.pressure }}</div>
            <el-divider></el-divider>
            <div class="sname">压力(Mpa)</div>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="orange minh">
            <div class="stitle">{{ status.power }}</div>
            <el-divider></el-divider>
            <div class="sname">功率(kW)</div>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="slategrey minh">
            <div class="stitle">{{ status.cflow }}</div>
            <el-divider></el-divider>
            <div class="sname">瞬时流量(Nm3/h)</div>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="slategrey minh">
            <div class="stitle">{{ status.mflow }}</div>
            <el-divider></el-divider>
            <div class="sname">本月流量(Nm3)</div>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="slategrey minh">
            <div class="stitle">{{ status.melectric }}</div>
            <el-divider></el-divider>
            <div class="sname">本月电量(Kw·h)</div>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="slategrey minh">
            <div class="stitle">{{ status.msave }}</div>
            <el-divider></el-divider>
            <div class="sname">本月节能(Kw·h)</div>
          </div>
        </el-col> -->
      </el-row>
    </el-card>
    <el-row>
      <el-col :span="18">
        <el-card><mytable :devices="status.devices"></mytable></el-card>
        <!-- <el-card>
      <div slot="header" class="clearfix">
        <el-divider direction="vertical"></el-divider><span>设备类型统计</span>
      </div> -->
        <mychart></mychart>
        <mychart2></mychart2>
        <!-- </el-card> -->
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>告警记录</span>
          </div>
          <el-table style="width: 100%">
            <el-table-column prop="name" label="告警名称"> </el-table-column>
            <el-table-column prop="date" label="告警时间"> </el-table-column>
          </el-table>
        </el-card>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>任务列表</span>
          </div>
          <el-table style="width: 100%">
            <el-table-column prop="name" label="任务名称"> </el-table-column>
            <el-table-column prop="date" label="任务时间"> </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import mytable from "@/components/projectlist/table";
import mychart from "@/components/projectlist/chart";
import mychart2 from "@/components/projectlist/chart copy";

// import chart from "@/components/statistics/chart";

import colorList from '../../../assets/color'

export default {
  mounted(){
    console.log(colorList)
  },
  components: {
    mytable,
    mychart,
    mychart2,
    // chart,
  },
  data() {
    return {
      nameArray: [],
      status: {
        status: {
          label: "状态",
          value: "运行",
        },
        gasdivideele: {
          label: "气电比",
          value: 0.906,
          unit: "",
        },
        pressure: {
          label: "压力",
          value: 0.6209,
          unit: "Mpa",
        },
        power: {
          label: "功率",
          value: 161,
          unit: "kW",
        },
        cflow: {
          label: "瞬时流量",
          value: 1348.5452,
          unit: "Nm3/h",
        },
        mflow: {
          label: "累计流量",
          value: 280427,
          unit: "Nm3",
        },
        melectric: {
          label: "当月电量",
          value: 27540.421,
          unit: "kW·h",
        },
        msave: {
          label: "累计电量",
          value: 5521.35,
          unit: "kW·h",
        },
      },
      devices: [
        [
          { label: "1#流量计", value: "运行" },
          {
            label: "瞬时流量",
            value: 1358.5452,
            unit: "Nm3/h",
          },
          {
            label: "累计流量",
            value: 2436272,
            unit: "Nm3",
          },
          {
            label: "压力",
            value: 0.6209,
            unit: "Mpa",
          },
        ],
        [
          { label: "1#空压机", value: "运行" },
          {
            label: "供气压力",
            value: 1358.5452,
            unit: "Mpa",
          },
          {
            label: "排气温度",
            value: "78°C",
            unit: "°C",
          },
          {
            label: "油分压差",
            value: 0.0143,
            unit: "Mpa",
          },
        ],
        [
          { label: "1#变频器", value: "运行" },
          {
            label: "运行频率",
            value: 19,
            unit: "Hz",
          },
          {
            label: "输出功率",
            value: "29",
            unit: "Kw",
          },
          {
            label: "PID反馈值",
            value: 25.7,
          },
        ],
        [
          { label: "1#电能表", value: "运行" },
          {
            label: "功率",
            value: 161,
            unit: "Kw",
          },
          {
            label: "电量",
            value: "1734250.6",
            unit: "Kw·h",
          },
          {
            label: "表号",
            value: "000000364398",
          },
        ],
      ],
    };
  },
  methods: {
    getColor(name) {
      if (this.nameArray.indexOf(name) == -1) {
        this.nameArray.push(name);
      }
      return colorList[this.nameArray.indexOf(name)].color;
    },
  },
};
</script>

<style scoped>
.minh {
  padding: 10px;
  height: 100px;
  display: flex;
  flex-direction: column;
  /* justify-items: flex-start; */
  justify-content: center;
  align-items: flex-start;
}
.stitle {
  font-size: 15px;
  /* color: white; */
}
.sunit {
  font-size: 10px;
}
.sname {
  text-align: center;
  /* color: white; */
}
.el-divider--horizontal {
  margin: 0;
}
</style>